<template>
  <a-layout-sider collapsible v-model="collapsed">
    <div class="logo" />
    <a-menu
      theme="dark"
      :defaultSelectedKeys="[$route.name]"
      :defaultOpenKeys="defineOpenKeys"
      mode="inline"
      @select="handleSelect"
    >
      <template v-for="item in routes">
        <template v-if="!item.children || item.children.length === 0">
          <a-menu-item :key="item.name">
            <a-icon :type="item.meta.icon" />
            <span>{{item.meta.title}}</span>
          </a-menu-item>
        </template>
        <template v-else>
          <a-sub-menu :key="item.name">
            <span slot="title">
              <a-icon :type="item.meta.icon || 'user'" />
              <span>{{item.meta.title}}</span>
            </span>
            <a-menu-item :key="child.name" v-for="child in item.children">{{child.meta.title}}</a-menu-item>
          </a-sub-menu>
        </template>
      </template>
    </a-menu>
  </a-layout-sider>
</template>

<script>
import { Layout, Menu, Icon } from "ant-design-vue";
import { otherRoutes } from "@/router/routes";

export default {
  data() {
    return {
      routes: otherRoutes,
      collapsed: false
    };
  },

  components: {
    ALayoutSider: Layout.Sider,
    AMenu: Menu,
    ASubMenu: Menu.SubMenu,
    AMenuItem: Menu.Item,
    AIcon: Icon
  },

  computed: {
    defineOpenKeys() {
      return [ this.$route.matched[0].name ]
    }
  },

  methods: {
    handleSelect({ key }) {
      this.$router.push({ name: key });
    },
  }
};
</script>
